<template>
    <div id="">
        <button v-on:click="random">random</button>
        <div class="matrix">
            <!-- move-class綁定平移動畫 -->
            <transition-group move-class="move">
                <div v-for="item in list" :key="item.id">{{ item.num }}</div>
            </transition-group>
        </div>
    </div>
</template>

 <script setup lang="ts">
import { reactive } from 'vue'

type ArrayList = {
    id: number,
    num: number
}
const arr = Array.apply(null, { length: 81 } as number[]).map((_, index) => {
    return {
        id: index,
        num: (index % 9) + 1
    }
})

// Array.apply(null, { length: 81 } as Array<number>)
// 就是初始化一个数组，长度为81，值都为undefined，{ length: 81 }是一个类数组对象
let list = reactive<ArrayList[]>(arr)

const random = () => {
    // 打乱数组
    list.sort(function () {
        return Math.random() - 0.5
    })
}

</script>

<style lang="less" scoped>
.matrix {
    width: calc(30px*10 + 9px);
    display: flex;
    flex-flow: row wrap;
    .move{ 
        transition: all 1s;
    }
    div {
        width: 30px;
        height: 30px;
        border: 1px solid;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18px;
    }
    :nth-child(3n){
        background-color: aqua;
    }
    :nth-child(3n+1){
        background-color: red;
    }
    :nth-child(3n+2){
        background-color: blue;
    }
}
</style>